<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
       <el-form-item label="商品名称">
        <el-input v-model="listQuery.goodsName" />
      </el-form-item>

      <el-form-item label="厂商">
        <el-input v-model="listQuery.productionFactory" />
      </el-form-item>
     
      <!-- <el-form-item label="商品分类">
        <el-input v-model="listQuery.goodsName" />
      </el-form-item> -->

      <el-form-item label="添加时间 ">
        <div class="block">
          <el-date-picker
            v-model="value"
            @change="change"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
      </el-form-item>

       <el-form-item>
        <el-button type="primary" @click="getList(1)">搜索</el-button>
      </el-form-item>
    </el-form>

     <el-row class="form-pai">
        <el-button type="primary" @click="showRank">排行榜</el-button>
      </el-row>

    <mytable ref="table" :listQuery="listQuery" @getList="getList" border style="width: 100%">
      <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="productionFactory" label="厂商" align="center"></el-table-column>
      <el-table-column prop="memberPrice" label="商品价格" align="center"></el-table-column>
      <!-- <el-table-column prop="fromFloor" label="商品分类" align="center"></el-table-column> -->
      <el-table-column prop="specification" label="规格" align="center"></el-table-column>
      <el-table-column prop="addTime" label="添加时间" align="center"></el-table-column>
      <el-table-column prop="pictureUrl" label="pc图片路径" align="center">
        <template slot-scope="{row}">
          <el-image  style="width: 70px; height: 70px" :src="row.pictureUrl"  :preview-src-list="[row.pictureUrl]"> </el-image>
        </template>
      </el-table-column>
       <el-table-column prop="pictureUrlApp" label="APP图片路径" align="center">
        <template slot-scope="{row}">
          <el-image  style="width: 70px; height: 70px" :src="row.pictureUrlApp"  :preview-src-list="[row.pictureUrl]"> </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="pictureUrlApp" label="图片" align="center"></el-table-column>  app图片 -->
    </mytable>
    <rank ref="rank"></rank>
  </div>
</template>

<script>
import mytable from "@/components/Table";
import browse from "@/api/logManage/browse";
import rank from "./rank"


export default {
  name: "browse",
  components: { mytable,rank},
  data() {
    return {
      listQuery: {
        // pageNo: 1,
        // pageSize: 1,
        goodsName: "",
        productionFactory: "",
        specification: "",
        searchKey: "", //
        startTime: "", //开始时间
        endTime: "" //结束时间
      },
        value: []
    };
  },

  methods: {
    //时间
    change(date) {
      if (date && date.length > 0) {
        this.listQuery.startTime = date[0];
        this.listQuery.endTime = date[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    getList(pageNo) {
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      browse.getBrowse(this.listQuery).then(res => {
        console.log(res);
        this.$refs.table.load(res.data.page.list, res.data.page.total);
      });
    },
    showRank() {
      this.$refs.rank.open()
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20px;
}
.form-pai {
  float: right;
  margin: 0px 0px 20px 0;
}
</style>